<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="../css/style.css">
  <title>从源码角度了解生命周期</title>
</head>

<body>
  <h2>生命周期简介</h2>
  <h3>初始化阶段</h3>
  <li>
    初始化阶段的主要目的是在Vue.js实例上初始化一些属性、事件以及响应式数据，如props,methods,data,computed
  </li>
  <h3>模板编译阶段</h3>
  <li>在created与beforeMount之间，进行的模板编译阶段。这个阶段的主要目的是将模板编译为渲染函数。</li>
  <li>
    当使用vue-loader时，*.vue文件内部的模板会在构建时预编译成Javascript，所以最终打包好的包里是不需要编译的，用运行时的版本即可
  </li>
  <h3>挂载阶段</h3>
  <li>
    位于beforeMount到mounted之间的是挂载阶段。在这个阶段，Vue.js会将其实例挂载到DOM元素上去。<span>在挂载过程中，Vue.js会开启Watcher来持续追踪依赖的变化</span>
  </li>
  <li>
    数据变化时，Watcher会通知虚拟DOM重新渲染视图。并且会在渲染视图前触发beforeUpdate钩子函数，渲染完毕后触发updated钩子函数
  </li>
  <h2>卸载阶段</h2>
  <li>
    Vue.js会将自身从父组件中删除。调用vm.$destroy
  </li>

  <script src="../js/constructor/13.js"></script>
</body>


</html>